<template>

    <div class="title" v-if="isImage" @click="handleclick(props.data)">
     <img   v-lazy="props.data.logolinks" />
    </div>
    <div class="title2" v-else @click="handleclick(props.data)">
      {{props.data.number}}
    </div>

 
</template>
<script lang="ts">
export default {
    name: "XEvent",
};
</script>

<script lang="ts" setup>
import router from '@/router'
import {ref,onMounted,watch,onUpdated} from 'vue'
interface dataType {
  HKD: string,
    number: string,
    price: string,
    time: string,
    title: string,
    trading: string,
    logolinks: string,
    status: string,
    listingDate: string,
    ipoID: number,
    tradeCurrency: string
   
}
const props = defineProps<{ data: dataType }>()

// const props = defineProps({
//     src: {
//         type: String,
//         required:true
//     },
//     number: {
//         type: String,
//         required:true
//     },
    
// })
const handleclick = (item: any) => {
    // localStorage.setItem('ipoID', item.ipoID)
    //console.log(item);
    // localStorage.setItem('itemData', JSON.stringify(item))

    sessionStorage.setItem('ipoID', item.ipoID)
    sessionStorage.setItem('itemData', JSON.stringify(item))
    router.push({
        name: 'Xdashboard',
        params: { data: JSON.stringify(item) }
    },
    )

}
const isImage=ref(false)
const checkImgExists=(imgurl:string) =>{
  try{
    var ImgObj = new Image();
    ImgObj.src = imgurl;
    ImgObj.onload = () => {
      isImage.value = true;
    };
    ImgObj.onerror = () => {
 
      isImage.value= false;
    };
  }catch(error){
    console.log('error')
  }
 
  }
  onUpdated(()=>{
    setTimeout(()=>{
        checkImgExists(props.data.logolinks)
    },1000)
  })
  onMounted(()=>{
      setTimeout(()=>{
        checkImgExists(props.data.logolinks)
    },1000)
  })


</script>
<style lang="scss" scoped>
.title {
        background-color: #fff;
        height: 190px;
        line-height: 140px;
        font-size: 40px;
        color: #fff;
        overflow: hidden;
        font-family: "Calibri";
        width: 287px;
        border-radius: 20px 20px 0px 0px;
        cursor: pointer;
      
        img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            // position: absolute;
            // top: 50%;
            // left: 50%;
            // transform: translate(-50%, -50%);
            background-color: #fff;
        }
    }
    .title2{
        background-color: #23445a;
        color: #fff;
        height: 190px;
        line-height: 190px;
        font-size: 40px;
        text-align: center;
        width: 285px;
        border-radius: 20px 20px 0px 0px;
        overflow: hidden;
        font-family: "Calibri";
        position: relative;
        cursor: pointer;
    }
</style>